<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MyJPetStore</title>
    <link type="text/css" href="css/style2.css" rel="stylesheet" />

</head>
<body>

<script src="js/polyfill.min.js"></script>

<div id="hero-slides">

    <div id="header">
        <div id="logo"></div>
        <div id="menu" onclick="window.open('/main/enter')">
            <div id="hamburger">
                <div class="slice"></div>
                <div class="slice"></div>
                <div class="slice"></div>
            </div>
        </div>
    </div>

    <div id="slides-cont">
        <div class="button" id="next"></div>
        <div class="button" id="prev"></div>
        <div id="slides">
            <div class="slide" style="background-image: url(images/10.jpg);">
                <div class="number">01</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Bird</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/20.jpg);">
                <div class="number">02</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Fish</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/30.jpg);">
                <div class="number">03</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Dog</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/40.jpg);">
                <div class="number">04</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Cat</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/50.jpg);">
                <div class="number">05</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Reptiles</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/60.jpg);">
                <div class="number">06</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Monkey</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
            <div class="slide" style="background-image: url(images/7.jpg);">
                <div class="number">07</div>
                <div class="body">
                    <div class="location">New Varieties</div>
                    <div class="headline">Parrot</div><a href="/Main/Manage">
                    <div class="link">Manage</div></a>
                </div>
            </div>
        </div>
        <div id="next-catch"></div>
        <div id="prev-catch"></div>
    </div>

</div>

<script>
    let hero = document.getElementById('hero-slides');
    let menu = document.getElementById('menu');
    let slides = document.getElementById('slides');
    let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
    let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
    let slideChildren = slides.children;
    let slideCount = slides.children.length;
    let currentlyDemoing = false;
    let currentPage = 0;
    let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
    let maxPageCount = () => slideCount / slidesPerPage() - 1;

    function goToPage(pageNumber = 0) {
        currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
        hero.style.setProperty('--page', currentPage);
    }

    function sleep(time) {
        return new Promise(res => setTimeout(res, time));
    }

    function hoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.add('hover');
    }

    function unhoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.remove('hover');
    }

    async function demo() {
        if(currentlyDemoing) {
            return;
        }
        currentlyDemoing = true;
        if(currentPage !== 0) {
            goToPage(0);
            await sleep(800);
        }
        let slides = slidesPerPage();
        let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
        let pageSeq = pageSeq_[slides] || pageSeq_[4];
        let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
        let slideSeq = slideSeq_[slides] || slideSeq_[2];
        await sleep(300);
        goToPage(pageSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[0]);
        await sleep(1200);
        goToPage(pageSeq[1]);
        unhoverSlide(slideSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[1]);
        await sleep(1200);
        goToPage(pageSeq[2]);
        unhoverSlide(slideSeq[1]);
        await sleep(300);
        hoverSlide(slideSeq[2]);
        await sleep(1600);
        goToPage(0);
        unhoverSlide(slideSeq[2]);
        currentlyDemoing = false;
    }

    next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
    prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
    menu.addEventListener('click', demo);

    sleep(100).then(demo);

    // window.addEventListener('resize', () => {
    // console.log(document.body.style.getPropertyValue('--slide-per-page'));
    // });
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>